<style>
    .dhh-userlist-tab {
        height: 789px;
        margin-top: 10px;
        float: left;
        width: 100%;
    }
    
    .click-opraty {
        font-size: 20px;
        cursor: pointer;
        margin: 5px;
    }
    
    .show-user-line {
        width: 100%;
        height: 30px;
        line-height: 30px;
    }
    
    .show-user-line:nth-of-type(odd) {
        background: lightgrey;
    }
    
    .show-title {
        text-indent: 20px;
        width: 25%;
    }
    
    .show-value {
        width: 75%;
        text-indent: 20px;
    }
    
    .show-user-line span {
        display: block;
        float: left;
        height: 100%;
    }
</style>
<div id="dhh-userlist" class="show_page_content">
    <!-- 顶部按钮 -->
    <div class="top_btn">
        <div class="input-line auto_14">
            <label for="">渠道商:</label>
            <input type="text" placeholder="请输入渠道商" id="channel_name">
        </div>
        <div class="input-line auto_14">
            <label for="">手机:</label>
            <input type="text" placeholder="请输入手机" id="tel_phone">
        </div>
        <div class="input-line auto_14">
            <label for="">平台:</label>
            <select name="" id="typeid">
                    <option value="">全部</option>
                <option value="0">PC</option>
                <option value="1">手机</option>
                <option value="2">微信</option>
                <option value="3">QQ快捷</option>
                <option value="4">微信快捷</option>
            </select>
        </div>
        <div class="input-line auto_14">
            <label for="">日期:</label>
            <input type="text" placeholder="请输入开始时间" class="stime">
        </div>
        <div class="input-line auto_14">
            <label for="" style="float:left;text-align: center">--</label>
            <input type="text" placeholder="请输入结束时间" class="etime">
        </div>
        <div class="input-line auto_14">
            <label for="">实名:</label>
            <select name="" id="real_name">
                    <option value="3">全部</option>
                    <option value="0">未审核</option>
                    <option value="1">已审核</option>
                    <option value="2">审核中</option>
            </select>
        </div>
        <div class="layui-btn input-line" id="hometotal-search"><i class="fa fa-search"></i>搜索</div>
        <div class="layui-btn input-line" id="hometotal-export"><i class="fa fa-download"></i>导出数据</div>
    </div>
    <div class="dhh-userlist-tab">
        <table id="dhh-userlist-table"></table>
    </div>
</div>
<div id="show-user-list" style="display:none;">
    <div class="show-user-line">
        <span class="show-title">昵称:</span>
        <span class="show-value" filed="username"></span>
    </div>
    <div class="show-user-line">
        <span class="show-title">手机:</span>
        <span class="show-value" filed="mobile"></span>
    </div>
    <div class="show-user-line">
        <span class="show-title">注册来源:</span>
        <span class="show-value" filed="from"></span>
    </div>
    <div class="show-user-line">
        <span class="show-title">真实姓名:</span>
        <span class="show-value" filed="real_name"></span>
    </div>
    <div class="show-user-line">
        <span class="show-title">性别:</span>
        <span class="show-value" filed="sex"></span>
    </div>
    <div class="show-user-line">
        <span class="show-title">民族:</span>
        <span class="show-value" filed="mingzu"></span>
    </div>
    <div class="show-user-line">
        <span class="show-title">身份证号:</span>
        <span class="show-value" filed="card_no"></span>
    </div>

    <div class="show-user-line">
        <span class="show-title">所在城市：
        </span>
        <span class="show-value" filed="city"></span>
    </div>
    <div class="show-user-line">
        <span class="show-title">芝麻分：</span>
        <span class="show-value" filed="zhimafen"></span>
    </div>
    <div class="show-user-line">
        <span class="show-title"> 实名认证</span>
        <select name="" id="is_name">
            <option value="0">待完善</option>
            <option value="1">审核中</option>
            <option value="2">审核通过</option>
            <option value="-1">审核驳回</option>
        </select>
    </div>
</div>
<script>
    layui.use(["laydate", "table"], function() {
        var laytab = layui.table;
        //laydate 时间控件
        var heigth = $("#page-container").height() - 90;
        $(".dhh-userlist-tab").height(heigth);
        //搜索
        $("#hometotal-search").on("click", function() {
            laytab.reload('usertable', {
                where: {
                    username: $("#channel_name").val(),
                    typeid: $("#typeid").val(),
                    stime: $("#dhh-userlist .stime").val(),
                    etime: $("#dhh-userlist .etime").val(),
                    mobile: $("#tel_phone").val(),
                    is_name: $("#real_name").val()
                }
            });
        });

        function laydateOPtion(ele, fn) {
            return {
                elem: ele, //需显示日期的元素选择器
                event: 'click', //触发事件
                type: "datetime",
                istime: false, //是否开启时间选择
                isclear: true, //是否显示清空
                istoday: true, //是否显示今天
                issure: true, //是否显示确认
                festival: true, //是否显示节日
                lang: "zh-CN",
                max: (function() {
                    var d = new Date();
                    var y = d.getFullYear();
                    var m = d.getMonth() + 1;
                    var dy = d.getDate();
                    return y + "-" + zero(m) + "-" + zero(dy);
                }()),
                fixed: false, //是否固定在可视区域
                zIndex: 99999999, //css z-index
                btns: ['confirm'],
                done: fn,
            }
        }
        layui.laydate.render(laydateOPtion("#dhh-userlist .stime",
            function(value, date, endDate) {
                var eDateStr = $("#dhh-userlist .etime").val();
                var sDateStr = value;
                if (sDateStr && eDateStr) {
                    var startDateTime = new Date(sDateStr).getTime();
                    var endDateTime = new Date(eDateStr).getTime();
                    if (endDateTime <= startDateTime) {
                        layer.msg("开始时间不能小于等于结束时间!", {
                            time: 3000,
                            icon: 0
                        });
                        var ele = this.elem[0];
                        setTimeout(function() {
                            ele.value = "";
                        }, 400);

                    } else {

                    }
                }

            }));
        layui.laydate.render(laydateOPtion("#dhh-userlist .etime",
            function(value, date, endDate) {
                var eDateStr = value;
                var sDateStr = $("#dhh-userlist .etime").val();
                if (sDateStr && eDateStr) {
                    var startDateTime = new Date(sDateStr).getTime();
                    var endDateTime = new Date(eDateStr).getTime();
                    if (endDateTime <= startDateTime) {
                        layer.msg("结束时间不能小于等于开始时间!", {
                            time: 3000,
                            icon: 0
                        });
                        var ele = this.elem[0];
                        setTimeout(function() {
                            ele.value = "";
                        }, 400);

                    } else {

                    }
                }

            }));

        renderTable();
        delRow("#dhh-userlist .fa-trash", "/users/user_del", function() {
                laytab.reload('usertable', {
                    where: {
                        username: $("#channel_name").val(),
                        typeid: $("#typeid").val(),
                        stime: $("#dhh-userlist .stime").val(),
                        etime: $("#dhh-userlist .etime").val(),
                        mobile: $("#tel_phone").val(),
                        is_name: $("#real_name").val()
                    }
                });
            })
            //点击查看
        $("#dhh-userlist").on("click", ".fa-edit", function() {
            var d_val = JSON.parse($(this).attr("dt"));
            var index = layer.open({
                type: 1,
                shade: 0.6,
                title: "修改用户审核",
                area: [$(document).width() * 0.4 + "px", $(document).height() * 0.7 + "px"],
                btn: ["确定"],
                id: "user-change",
                content: $("#show-user-list").html(),
                yes: function() {
                    ///users/user_real_name_verify
                    $.ajax({
                        url: "/users/user_real_name_verify",
                        type: "post",
                        data: {
                            uid: d_val.uid,
                            is_name: $("#is_name").val()
                        },
                        dataType: "json",
                        beforeSend: function() {
                            loadIndex = layer.load(0);
                        },
                        success: function(d) {
                            if (d.result == "1") {
                                layer.msg("修改成功！", {
                                    icon: 1,
                                    time: 2000
                                });
                                layer.close(index);
                            } else {
                                layer.msg("修改失败！", {
                                    icon: 1,
                                    time: 2000
                                });
                            }
                        },
                        error: function() {
                            layer.msg("网络成功！", {
                                icon: 1,
                                time: 2000
                            });
                        }
                    });
                },
                success: function() {
                    for (var i = 0; i < $(".show-value").length; i++) {

                        $(".show-value").eq(i).html(d_val[$(".show-value").eq(i).attr("filed")]);
                    }
                }

            });
        });
        //导出数据
        $("#hometotal-export").on("click", function() {
            $.ajax({
                url: "/users/user_export",
                type: "get",
                data: "",
                dataType: "json",
                beforeSend: function() {
                    loadIndex = layer.load(0);
                },
                success: function(d) {
                    layer.close(loadIndex);
                    if (d.result == "1") {
                        layer.msg("导出成功", {
                            icon: 1,
                            time: 2000
                        });
                    } else {
                        layer.msg("导出失败", {
                            icon: 2,
                            time: 2000
                        });
                    }
                },
                error: function() {
                    layer.msg("网络异常", {
                        icon: 2,
                        time: 2000
                    });
                }
            });
        });

        function zero(m) {
            return m < 10 ? "0" + m : m;
        }

        function renderTable() {
            laytab.render({
                elem: '#dhh-userlist-table',
                height: heigth,
                url: "/users/user_list",
                method: "get",
                id: "usertable",
                response: {
                    statusName: "result",
                    msgName: 'tips' //规定状态信息的字段名称，默认：msg
                        ,
                    countName: 'total' //规定数据总数的字段名称，默认：count
                        ,
                    dataName: 'rows',
                    statusCode: 1 //规定成功的状态码，默认：0
                },
                request: {
                    pageName: 'page' //页码的参数名称，默认：page
                        ,
                    limitName: 'lines' //每页数据量的参数名，默认：limit
                },
                where: {
                    username: $("#channel_name").val(),
                    typeid: $("#typeid").val(),
                    stime: $("#dhh-userlist .stime").val(),
                    etime: $("#dhh-userlist .etime").val(),
                    mobile: $("#tel_phone").val(),
                    is_name: $("#real_name").val()
                },
                done: function(d) {
                    $(".layui-none").text(d.tips);
                },
                parseData: function(res) { //res 即为原始返回的数据
                    return {
                        "result": res.result, //解析接口状态
                        "tips": res.tips, //解析提示文本
                        "total": res.total, //解析数据长度
                        "rows": res.rows //解析数据列表
                    }
                },
                cols: [
                    [{
                        title: "id编号",
                        field: "uid",

                    }, {
                        title: "用户名",
                        field: "username",

                    }, {
                        title: "手机",
                        field: "mobile",
                        width: "20%"
                    }, {
                        title: "来源",
                        field: "from",

                    }, {
                        title: "二级渠道",
                        field: "d_name",

                    }, {
                        title: "芝麻分",
                        field: "zhimafen",

                    }, {
                        title: "实名情况",
                        field: "is_name",
                        templet: function(d) {
                            if (d.is_name == "1") {
                                return "<span class='background:#5FB878;'>已实名</span>";
                            } else if (d.is_name == "0") {
                                return "<span class='background:#FF5722;'>未激活</span>";
                            } else if (d.is_name == "2") {
                                return "<span class='background:#c2c2c2;'>未知状态</span>";
                            } else {
                                return notNull(d.is_name)
                            }
                        }
                    }, {
                        title: "真实姓名",
                        field: "real_name",

                    }, {
                        title: "民族",
                        field: "mingzu",

                    }, {
                        title: "sex",
                        field: "性别",
                        templet: function(d) {
                            if (d.sex == "0" || d.sex == "null") {
                                return "保密";
                            } else if (d.sex == "1") {
                                return "男";
                            } else if (d.sex == "2") {
                                return "女";
                            } else {
                                return notNull(d.sex)
                            }
                        }
                    }, {
                        title: "city",
                        field: "城市",

                    }, {
                        title: "身份证",
                        field: "card_no",

                    }, {
                        title: "芝麻分",
                        field: "zhimafen",

                    }, /*{
                        title: "管理",
                        field: "opraty",
                        templet: function(d) {
                            return "<a class='click-opraty'><i class='fa fa-edit' dt='" + JSON.stringify(d) + "' style='color:#393D49;font-size:15px;'></i></a>" +
                                "<a class='click-opraty'><i class='fa fa-trash' uid='" + d.uid + "' style='color:#393D49;font-size:15px;'></i></a>"
                        }
                    }*/]
                ],
                page: true,
                limits: [20, 50, 100],
                limit: 20,
                loading: true,
                skin: {
                    even: true
                },
            });
        }
    });
</script>